<template>
	<view>
		<view class="">
			<view class="dis_flex mt24 fz28 ml40 mr40">
				<view class="tf_999">商品库存有限，请您尽快下单</view>
				<view v-show="edit" class="tf_22" @click="edit = false">编辑</view>
				<view v-show="!edit" class="tf_22" @click="edit = true">完成</view>
			</view>
			<view class="ml24 mr24 mt20">
				<view class="dis_f bac_f padding30 radius16" v-for="(item, index) in cart_list" :key="index">
					<view class="w40 h40 radius501 border1" @click="chooseProduct(item, index)" :class="{ active: item.is_checked == 1 }"></view>
					<image class="ml30 w180 h180 radius8" :src="item.gg_image" mode="aspectFill"></image>
					<view class="ml24 dfd_c jcsb" style="min-height: 180rpx; min-width: 368rpx">
						<view class="fz28 tf_333" style="max-width: 368rpx">{{ item.title }}</view>
						<view class="dis_flex w">
							<view class="fz34 fw tf1">¥ {{ item.price }}</view>
							<view class="fz24 tf_999 dis_f">
								<view class="w32 h32"><image class="w32 h32" src="../../static/image/jian.png" @click="numJian(item)" mode="aspectFill"></image></view>
								<view class="ml30 mr30 w32 h32 fz28 tf_22">
									<u--input
										border="none"
										fontSize="14px"
										:customStyle="{ fontWeight: 'bold', width: '32rpx', height: '32rpx' }"
										v-model="item.serve_num"
										type="number"
										inputAlign="center"
										readonly
									></u--input>
								</view>
								<view class="w32 h32"><image class="w32 h32" src="../../static/image/jia.png" @click="numJia(item)" mode="aspectFill"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bac_f sde-footer dis_flex padding24 p_f w pl30">
			<view class="dis_f" @click="checkAll">
				<view class="w40 h40 radius501 border1" :class="{ active: chst == 0 }"></view>
				<view class="fz26 tf_666 ml24">全选</view>
			</view>
			<view v-show="edit" class="dis_f mr30">
				<view class="fz26">合计：</view>
				<view class="dfd_c ac fz40 fw tf_4537">￥{{ getTotal.totalPrice.toFixed(2) }}</view>
				<view class="col-th radius8 w240 h88 tf fz32 dis_f jc ml24 mr24" @click="goOederCf">结算</view>
			</view>
			<view v-show="!edit" class="w160 radius8 jc border9 dis_f fz26 tf_22 mr40" style="height: 68rpx;" @click="delProdect">删除</view>
		</view>
	</view>
</template>

<script>
import { goProductOrder } from '@/config/api.js';
export default {
	data() {
		return {
			serve_num: 1, //num
			address_id: '', //当前地址id
			xz_active: true, //判断是否被选中
			edit: true,
			cart_list: [],
			chst: 1,
			total: 0,
			cur_pro_list: [], //当前选中商品列表
			page_obj: [] //页面参数对象
		};
	},
	onLoad(options) {
		this.address_id = options.address_id;
		this.getCartinfo();
	},
	//计算总价格
	computed: {
		getTotal() {
			// 获取cart_list中is_checked为true的数据
			let proList = this.cart_list.filter(function(val) {
				return val.is_checked;
			});
			// 设置一个值用来存储总价
			let totalPrice = 0;
			for (let i = 0; i < proList.length; i++) {
				// 将每个商品的总价加在一起
				totalPrice += proList[i].serve_num * proList[i].price;
			}
			return {
				// 被选中的物品数量就是proList.length
				totalNum: proList.length,
				// 总价就是totalPrice
				totalPrice: totalPrice
			};
		}
	},
	methods: {
		//操作数量
		numJian(item) {
			item.serve_num == 1 ? (item.serve_num = 1) : item.serve_num--;
		},
		numJia(item) {
			item.serve_num++;
		},
		//结算商品
		goOederCf() {
			if (this.cart_list.length !== 0) {
				console.log(this.cart_list);
				this.cur_pro_list.forEach((v, i) => {
					console.log(v);
					console.log(this.cart_list[v]);
					this.page_obj.push(this.cart_list[v]);
				});
				let id_json = [];
				this.page_obj.forEach(v => {
					id_json.push({
						id: Number(v.id),
						num: Number(v.serve_num)
					});
				});
				let idJson = JSON.stringify(id_json);
				goProductOrder({
					cart_json: idJson,
					cart: 1,
					address_id: this.address_id
				}).then(res => {
					let total = res;
					this.getPay(total);
					this.delProdect();
				});
			}
		},
		// 微信支付
		async getPay(total) {
			let payCall = await this.common.orderPay(total);
			if (payCall.errMsg == 'requestPayment:fail cancel') {
				uni.reLaunch({
					url: '../../pages/failPay/failPay?state=' + 2
				});
			} else {
				uni.reLaunch({
					url: '../../pages/successPay/successPay?state=' + 2
				});
			}
		},
		//删除商品
		delProdect() {
			this.total = 0;
			this.cur_pro_list.sort();
			for (let i = this.cur_pro_list.length - 1; i >= 0; i--) {
				this.cart_list.splice(this.cur_pro_list[i], 1);
			}
			this.cur_pro_list = [];
			uni.setStorageSync('store_cart_info', this.cart_list);
		},
		//全部选择
		checkAll() {
			if (this.chst) {
				this.chst = 0;
				this.cart_list.forEach((val, i) => {
					val.is_checked = 1;
					this.cur_pro_list.push(i);
					console.log(this.cur_pro_list);
				});
				// this.total = this.cart_list.reduce((sum, value) => sum + Number(value.price), 0);
			} else {
				this.chst = 1;
				this.cart_list.forEach(val => {
					val.is_checked = 0;
					this.cur_pro_list = [];
					this.total = 0;
				});
			}
		},
		//选择商品
		chooseProduct(e, i) {
			if (e.is_checked) {
				e.is_checked = 0;
				let getLocation = this.cur_pro_list.indexOf(i);
				this.cur_pro_list.splice(getLocation, 1);
				// this.total =this.total-(Number(e.price)*Number(e.serve_num)) ;
			} else {
				e.is_checked = 1;
				this.cur_pro_list.push(i);
				// this.total =this.total+(Number(e.price)*Number(e.serve_num)) ;
			}
			console.log('cart', this.cart_list);
			console.log(this.page_obj);
			//全选中：false 为选中 true  //取反   every==1 全选 true  全不选或选一个false
			this.chst = !this.cart_list.every(item => item.is_checked == 1);
		},
		//获取购物车信息
		getCartinfo() {
			if (uni.getStorageSync('store_cart_info')) {
				let cart_info = uni.getStorageSync('store_cart_info');
				console.log(cart_info);
				cart_info.forEach(v => {
					v.is_checked = 0;
				});
				console.log(cart_info);
				this.cart_list = cart_info;
			}
		}
	}
};
</script>

<style lang="scss">
.active {
	background-image: url(@/static/image/xuanzhong.png);
	background-size: cover;
	border: none;
}
</style>
